<!DOCTYPE html>
<html>
<head>
  <title>Simple Action Test</title>
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/default.css" />
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/defaultColor.css" />
  <script src="../../../src/kekule.js?min=false"></script>
  <script>
    function $(id)
    {
      return document.getElementById(id);
    }

    var btn1, btn2, btn3, btn4, btn5;
    var action1, action2;

    function createButtons()
    {
      var div1 = $('div1');
      btn1 = new Kekule.Widget.Button($('button1'));
      btn1.setHint('this is button1');
      btn1.setWidth('20em');
      /*
      btn1.addEventListener('execute', function(e) {
           alert('button1 clicked!');
        });
       */

      btn2 = new Kekule.Widget.Button(document);
      btn2.setText('Button Created');
      btn2.setHint('this is button2');
      /*
      btn2.addEventListener('execute', function(e) {
        alert('button2 clicked!');
      });
      */
      btn2.setEnabled(false);
      //div1.appendChild(btn2.getElement());
      btn2.appendToElem(div1);

      btn3 = new Kekule.Widget.Button(btn1);
      btn3.setText('Child Button');
      btn3.setHint('this is button3');
      /*
      btn3.addEventListener('execute', function(e) {
        alert('button3 clicked!');
      });
      */
      //div1.appendChild(btn3.getElement());
      btn3.appendToElem(div1);

      btn4 = new Kekule.Widget.Button($('buttonOnA'));
      btn4.setHint('this is button4').setEnabled(true);
      /*
      btn4.addEventListener('execute', function(e) {
        alert('button4 clicked!');
      });
      */

      btn4.setShowGlyph(true).getLeadingGlyph()
        .setNormalInfo({'src': '../images/testIcons.png'})
        .setFocusedInfo({'src': '../images/testIcons.png', 'position': '-32px -32px'})
        .setActiveInfo({'src': '../images/calendar.gif'});

      btn1.setShowGlyph(true).getLeadingGlyph()
        .setNormalInfo({'src': '../images/testIcons.png'})
        .setFocusedInfo({'src': '../images/testIcons.png', 'position': '-16px -16px'})
        .setActiveInfo({'src': '../images/calendar.gif'});
      btn1.getTailingGlyph()
        .setNormalInfo({'src': '../images/testIcons.png'})
        .setFocusedInfo({'src': '../images/testIcons.png', 'position': '-16px -16px'})
        .setActiveInfo({'src': '../images/calendar.gif'});

      action1 = new Kekule.Action();
      action1.addEventListener('execute', function(e) {alert('action1 executed');} );
      btn1.setAction(action1);
      btn3.setAction(action1);

      action2 = new Kekule.Action();
      action2.addEventListener('execute', function(e) {alert('action2 executed');} );
      btn2.setAction(action2);
      btn4.setAction(action2);

      /*
      var img1 = new Kekule.Widget.Glyph(document, {'src': '../images/testIcons.png'});
      img1.setActiveInfo({'src': '../images/calendar.gif'}).setWidth('32px').setHeight('32px').appendToElem(div1);

      var img2 = new Kekule.Widget.Glyph(btn4);
      img2.setNormalInfo({'src': '../images/testIcons.png'}).setWidth('32px').setHeight('32px').appendToElem(btn4.getElement());
      */
    }

		function createCheckButtons()
		{
			var div2 = $('div2');
			var btn = new Kekule.Widget.CheckButton(document, 'CheckButton1');
      btn.setHint('this is check button 1').appendToElem(div2);
			btn = new Kekule.Widget.CheckButton(document, 'CheckButton2');
      btn.setHint('this is check button 2').appendToElem(div2);
		}

		function createRadioButtons()
		{
			var div3 = $('div3');
			var btnGroup = new Kekule.Widget.ButtonGroup(document);
      btnGroup.appendToElem($('div3'));

			var btn = new Kekule.Widget.RadioButton(btnGroup, 'Radio1');
      btn.setGroup('group1').setHint('this is radio button 1');
			btn = new Kekule.Widget.RadioButton(btnGroup, 'Radio2');
      btn.setGroup('group1').setHint('this is radio button 2');
			btn = new Kekule.Widget.RadioButton(btnGroup, 'Radio3');
      btn.setGroup('group1').setHint('this is radio button 3');
			btn = new Kekule.Widget.RadioButton(btnGroup, 'Radio4');
      btn.setGroup('group1').setHint('this is radio button 4');

			btn = new Kekule.Widget.CheckButton(btnGroup, 'Check1');
      btn = new Kekule.Widget.CheckButton(btnGroup, 'Check2');
		}

		function init()
		{
			createButtons();
			createCheckButtons();
			createRadioButtons();
		}

    Kekule.X.domReady(init);
  </script>
</head>
<body>

  <div id="div1">
    <button id="button1">Button Binded</button>
    <a id="buttonOnA" href="#">Button On A</A>
  </div>

	<div id="div2"></div>
	<div id="div3"></div>
</body>
</html>